{% extends 'base.html' %}
{% load static %}

{% block content %}


<style type="text/css">
	.profile-image{
		max-height: 100px;
		max-width: 100px;
	}
	.profile-image{
		border-radius: 12px;
	}
	.card{
		border-radius: 12px;
	}
	.dropdown-toggle::after { 
		content: none; 
	}
	.profile-link{
		color: #000;
	}
	.material-icons{
		font-size: 30px;
	}
	.material-icons:hover{
		cursor: pointer;
	}
	.confirm-friend-request{
		color: green;
	}
	.confirm-friend-request:hover {
		opacity: 0.3;
	}
	.decline-friend-request:hover {
		opacity: 0.3;
	}
	.decline-friend-request{
		color: red;
	}
</style>

<div class="container">
	<div class="card p-2">

		{% if friend_requests %}
		<div class="d-flex flex-row flex-wrap">
		{% for request in friend_requests %}
		<div class="card flex-row flex-grow-1 p-2 mx-2 my-2 align-items-center">
			<a class="profile-link" href="{% url 'account:view' user_id=request.sender.id %}">
				<div class="card-image m-2">
					<img class="img-fluid profile-image" src="{{request.sender.profile_image.url}}" alt="">
				</div>
			</a>
			<a class="profile-link" href="{% url 'account:view' user_id=request.sender.id %}">
				<div class="card-center px-2">
					<h4 class="card-title">{{request.sender.username}}</h4>
				</div>
			</a>
			<div class="d-flex flex-row card-right flex-grow-1 justify-content-end mx-2">
	  			<span id="id_cancel_{{request.sender.id}}" class="decline-friend-request material-icons p-1" onclick='triggerDeclineFriendRequest("{{request.id}}")'>cancel</span>
	  			<span id="id_confirm_{{request.sender.id}}" class="confirm-friend-request material-icons p-1" onclick='triggerAcceptFriendRequest("{{request.id}}")'>check</span>
			</div>
		</div>
		{% if forloop.counter|divisibleby:2 %}
		</div><div class="d-flex flex-row flex-wrap">
		{% endif %}
		
		{% endfor %}
		
		{% else %} <!-- If no friends -->
		<div class="d-flex flex-row flex-grow-1 justify-content-center align-items-center p-4">
			<p>No results</p>
		</div>
		{% endif %}
		</div>
	</div>
	
</div>

<script type="text/javascript">

	function onFriendRequestAccepted(){
		location.reload();
	}

	function onFriendRequestDeclined(){
		location.reload();
	}

	function triggerAcceptFriendRequest(friend_request_id){
		acceptFriendRequest(friend_request_id, onFriendRequestAccepted)
	}

	function triggerDeclineFriendRequest(friend_request_id){
		declineFriendRequest(friend_request_id, onFriendRequestDeclined)
	}
</script>

{% include 'friend/snippets/accept_friend_request.html' %}
{% include 'friend/snippets/decline_friend_request.html' %}


{% endblock content %}